<template>
  <view class="goods">
    <!-- 图片 -->
    <u-image width="180rpx"
             height="180rpx"
             border-radius='10'
             :src="goods.goods_img"></u-image>
    <!-- 右侧 -->
    <view class="right">
      <!-- 标题 -->
      <h3 class="goods-name">{{goods.goods_name}}</h3>
      <!-- 底部 -->
      <view class="footer">
        <!-- 标价 -->
        <text class="goods-price">￥{{goods.goods_price}}<small>/份</small></text>
        <!-- 步进器 -->
        <u-number-box v-model="goods.count"
                      input-width='70'
                      :max='9'
                      bg-color='#2b85e4'
                      disabled-input
                      color='#fff'></u-number-box>
      </view>
    </view>
  </view>
</template>

<script>
import eventBus from '@/common/eventbus.js'
export default {
  props: { goods: Object }, // 商品信息
  mounted() {
    // 清空购物车
    eventBus.$on('clear-car', () => (this.goods.count = 0))
  },
}
</script>

<style lang="scss" scoped>
.goods {
  margin: 20rpx 0;
  height: 200rpx;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #fff;
  .right {
    flex: 1;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    height: 180rpx;
    justify-content: space-between;
    .footer {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .goods-price {
        font-size: 30rpx;
        color: $u-type-error;
        small {
          color: $u-type-info;
        }
      }
    }
  }
  .goods-name {
    width: 300rpx;
    font-weight: bold;
    font-size: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>